<template>
<div id="playController" :style="{ bottom: falsBottom }" >
    <div class="listview_bottom">
        <div>
            <img :src="$store.state.playlist[$store.state.playCurrentIndex].al.picUrl" alt="">
        </div>
        <div @click="musicDetail">
            <p>{{$store.state.playlist[$store.state.playCurrentIndex].name}}</p>
            <p>{{$store.state.playlist[$store.state.playCurrentIndex].al.name}}</p>
        </div>

        <div class="iconfont icon-bofang" @click='play' v-show="playAudio"></div>
        <div class="iconfont icon-zanting" @click='play' v-show="!playAudio"></div>

        <div class="iconfont icon-24gl-playlistMusic"></div>
		
		
		
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${$store.state.playlist[$store.state.playCurrentIndex].id}.mp3`"></audio>
    </div>
</div>
</template>

<script>
	
export default {
    name: "playController",
    data() {
        return {
            playAudio:'true',
        };
    },
	components:{
		
	},
    props: {
        bot: Boolean,
    },
    mounted() {
        // console.log(this.$refs.audio);
    },
    methods: {
        play: function () {
            if (this.$refs.audio.paused) {
                this.$refs.audio.play();
                this.playAudio=false
                // console.log("播放");
            } else {
                this.$refs.audio.pause();
                this.playAudio=true
                // console.log("暂停");
            }

        },
		musicDetail:function(){
			console.log("dianji ");
		}
    },
    computed: {
        falsBottom: function () {
            //   console.log(this.bot);
            if (this.bot == false) {
                // console.log("false");
                return 0;
            } else {
                // console.log("true");
            }
        },
    },
};
</script>

<style lang="less" scoped>
#playController {
    z-index: 999;
    width: 100%;
    height: 1.1rem;
    // background-color: red;
    position: fixed;
    bottom: 1rem;
    box-shadow: 0 -1px 1px -1px rgba(17, 17, 17, 0.7);
}

.listview_bottom {
    background-color: rgb(249, 249, 249);
    height: 1.1rem;
    display: flex;
    justify-content: left;
    align-items: center;
    box-sizing: border-box;

    >div {
        padding-left: 0.2rem;

        &:nth-of-type(1) {
            width: 0.7rem;
            text-align: center;

            >img {
                width: .75rem;
                height: .75rem;
                border-radius: 50%;
                margin-left: -.1rem;
            }
        }

        &:nth-of-type(2) {
            flex: 1;

            p {
                &:nth-of-type(1) {
                    width: 5rem;
                    font-weight: 500;
                    font-size: 0.35rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &:nth-of-type(2) {
                    width: 5rem;
                    font-size: 0.3rem;
                    color: #999;
                    // padding-top: .1rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: inherit;
                }
            }
        }

        &:nth-of-type(3) {
			z-index: 999;
		}
		&:nth-of-type(4) {
			z-index: 999;
		}

        &:nth-of-type(5) {
            padding-right: 0.2rem;
        }
    }
}
</style>
